<template>
    <div style='height:100%;'>
        <v-chart style='height:100%;width: 100%;' ref='chart' :options='options' @mouseover='mouseover'></v-chart>
    </div>
</template>

<script>
export default {
	props : {
		value : [Array, Object],
		default : function(){
			return []
		}
	},
    computed : {
        options () {
			var series = []
			var data = this.value

			if(data.agentList.length > 0) {
				let serie = {
					name : '代理商',
					type : 'scatter',
					coordinateSystem : 'geo',
					symbol : 'image://' + require('@/assets/images/agent-icon.png'),
					symbolSize : [34 / 1.5, 41 / 1.5],
					data : []
				}

				data.agentList.forEach(item => {
					serie.data.push({name : item.name, value : [item.longitude, item.latitude, item.id, 1]})
				})

				series.push(serie)
			}

			if(data.storeList.length > 0) {
				let serie = {
					name : '门店',
					type : 'scatter',
					coordinateSystem : 'geo',
					symbol : 'image://' + require('@/assets/images/store-icon.png'),
					symbolSize : [34 / 1.5, 41 / 1.5],
					data : []
				}

				data.storeList.forEach(item => {
					serie.data.push({name : item.name, value : [item.longitude, item.latitude, item.id, 2]})
				})

				series.push(serie)
			}

			if(data.siteList.length > 0) {
				let serie = {
					name : '站点',
					type : 'scatter',
					coordinateSystem : 'geo',
					symbol : 'image://' + require('@/assets/images/site-icon.png'),
					symbolSize : [34 / 1.5, 41 / 1.5],
					data : []
				}

				data.siteList.forEach(item => {
					serie.data.push({name : item.name, value : [item.longitude, item.latitude, item.id, 3]})
				})

				series.push(serie)
			}

			if(data.deviceList.length > 0) {
				let serie = {
					name : '设备',
					type : 'scatter',
					coordinateSystem : 'geo',
					symbol : 'image://' + require('@/assets/images/device-icon.png'),
					symbolSize : [34 / 1.5, 41 / 1.5],
					data : []
				}

				data.deviceList.forEach(item => {
					serie.data.push({name : item.name, value : [item.longitude, item.latitude, item.deviceNo, 4]})
				})

				series.push(serie)
			}


			var data0 = [
				{
					value : [114.043166, 22.692618, 10]
				}
			]

			var data1 = [
				{
					value : [116.326836, 40.00366, 10]
				}
			]

			var data2 = [
				{
					value : [91.171961,29.653482, 10]
				}
			]
            var options = {
				geo: {
					map: 'china',
					zoom : 1.2,
					roam : true,
					label: {
						emphasis: {
							show: false
						}
					},
					itemStyle: {
						normal: {
							areaColor: '#101722',
							borderColor: '#5479c6'
						},
						emphasis: {
							areaColor: '#101722'
						}
					}
				},

				series: series
			}

            return options
        }
	},
	
	methods : {
		mouseover (e) {
			this.$emit('mouseover', {value : e.value, clientX : e.event.event.clientX, clientY : e.event.event.clientY})
		}
	},

	mounted(){
		this.$refs.chart.chart.on('georoam', res => {
			console.log(res)
		})
	}
}
</script>